<template>
	<div class="login-container">
		<div class="login-box">
			<a-switch v-model:checked="currentTheme" checkedValue="light" unCheckedValue="dark" @change="handleChange">
				<template #checkedChildren>🌞</template>
				<template #unCheckedChildren>🌜</template>
			</a-switch>
			<div class="login-left">
				<img src="../../assets/images/login.png" alt="login" />
			</div>
			<div class="login-form">
				<div class="login-logo">
					<img class="login-icon" src="@/assets/logo.png" alt="logo" />
					<span class="logo-text">Clean-Admin</span>
				</div>
				<a-form :model="formState" name="basic" :wrapper-col="{ span: 24 }" autocomplete="off"
					@finish="onFinish" @finishFailed="onFinishFailed">
					<a-form-item name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
						<a-input v-model:value="formState.username" placeholder="请输入用户名: admin" />
					</a-form-item>
					<a-form-item name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
						<a-input-password v-model:value="formState.password" placeholder="请输入密码: admin123" />
					</a-form-item>
					<a-button type="primary" html-type="submit">登录</a-button>
					<a-divider class="form-divider" style="height: 2px;">其它账号登录</a-divider>
					<a-space :size="12">
						<WechatOutlined style="font-size: 28px;color:#55AC8B;" />
						<AlipayCircleOutlined style="font-size: 28px;color: #0066CC" />
						<LinkedinOutlined style="font-size: 28px;color: #C13584;" />
						<ZhihuOutlined style="font-size: 28px;color:#0077AE" />
					</a-space>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { notification } from 'ant-design-vue';
import { fetchLogin } from '@/apis/admin/user';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/stores';

const themeStore = useThemeStore();
const { currentTheme } = storeToRefs(themeStore);
const { toggleTheme } = themeStore;
const handleChange = (value: string) => {
	toggleTheme(value);
	const appEl = document.getElementById('app');
	if (value === 'dark') {
		appEl?.classList.remove('light');
		appEl?.classList.add('dark');
	} else {
		appEl?.classList.remove('dark');
		appEl?.classList.add('light');
	}
};

interface FormState {
	username: string;
	password: string;
}

const formState = reactive<FormState>({
	username: '',
	password: ''
});

const router = useRouter();
const onFinish = (values: FormState) => {
	fetchLogin<FormState>(values).then(res => {
		notification[res.code === 200 ? 'success' : 'error']({
			message: '提示',
			description: res.code === 200 ? '登录成功' : res.message,
		});
		if (res.code === 200) router.push({ name: 'home' });
	}).catch(() => { });
};

const onFinishFailed = (errorInfo: Record<string, string[]>) => {
	console.log('Failed:', errorInfo);
};
</script>

<style scoped lang="scss">
.login-container {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	min-width: 550px;
	height: 100%;
	min-height: 500px;
	background-image: url('../../assets/images/bg_login.svg');
	background-position: 50%;
	background-size: cover;

	.login-box {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 86%;
		height: 88%;
		padding: 0 4% 0 20px;
		overflow: hidden;
		border-radius: 10px;
		background-color: var(--background-color);


		:deep(.ant-switch) {
			width: 40px;
			position: absolute;
			top: 8px;
			right: 16px;
			background: #3c3f44;

			.ant-switch-handle::before {
				opacity: 0;
			}

			.ant-switch-inner-checked {
				background: #000000;
				border-radius: 9px;
				transform: translateX(-11px);
				width: 24px;
			}

			.ant-switch-inner-unchecked {
				background: #000000;
				border-radius: 9px;
				transform: translateX(-2px);
				width: 24px;
			}
		}

		.ant-switch.ant-switch-checked:hover:not(.ant-switch-disabled) {
			background: #3c3f44;
		}

		:deep(.ant-switch.ant-switch-checked .ant-switch-inner .ant-switch-inner-checked) {
			margin-inline-start: 2px;
		}

		.login-left {
			width: 750px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.login-form {
			background-color: transparent !important;
			box-shadow: var(--base-box-shadow);
			padding: 40px 45px 25px;
			border-radius: 10px;

			.login-logo {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 40px;

				.login-icon {
					width: 70px;
				}

				.logo-text {
					padding-left: 25px;
					font-size: 42px;
					font-weight: 700;
					white-space: nowrap;
				}
			}

			:deep(.ant-form) {
				.ant-form-item {
					.ant-form-item-control-input {
						min-height: 40px;

						.ant-form-item-control-input-content,
						.ant-input,
						.ant-input-password {
							height: 100%;
						}
					}
				}
			}

			.ant-btn {
				width: 100%;
			}

			.form-divider {
				margin: 32px 0;
				font-size: 14px;
			}

			.ant-space {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: center;

				:deep(.ant-space-item) {
					cursor: pointer;
				}
			}

		}
	}
}
</style>
